<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<form action="https://www.baidu.com/">
    <p>
        账号：<input type="text" name="user" class="user">
    </p>
    <p>
        密码：<input type="text" name="pass" class="pass">
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>


<script>
var form = document.querySelector('form');
var user = document.querySelector('.user');
var pass = document.querySelector('.pass');

// submit 表单提交时触发
form.onsubmit = function (){
    console.log( '表单提交。。。' );

    // 空值判断
    if (!user.value || !pass.value) {
        console.log( '账号或密码不能为空！' );
        return false;// 阻止表单提交
    }
}

// reset 表单重置时触发
form.onreset = function (){
    console.log( '表单重置。。。' );
}


// resize 浏览器可视区窗口大小改变时触发（高频触发事件）
window.onresize = function (){
    console.log( '窗口大写改变。。。' )
}

</script>
</body>
</html>